<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>刘静的主页</title>
<style>
body{
	background-color: black;
}
#div1 {
	width:300px; 
	height:300px; 
	background:#666666; 
	filter:alpha(opacity:30); 
	opacity:0.3;
	margin: 0 auto;
	margin-top: 188px;
	border:2px solid;
	border-radius:25px;
}
#div1 img{
	width: 300px;
	height: 300px;
	border:2px solid;
	border-radius:25px;
}
img{
	float: left;
}
#div2{
	display: none;
	float: left;
	filter:alpha(opacity:0); 
	opacity:0;
}
#div2 ul{
	padding: 1px 21px;
	list-style: none;
	font-family:"YouYuan",Georgia,Serif;
	font-size: 18px;
	color: lightcyan;
	/*STCaiyun*/
}
#div2 ul li{
	width: 250px;
	padding: 10px 0px;
	border-bottom: 1px solid #FFFFBB;
}
#div3 {
	width: 570px;
	height: 250px;
	display: none;
	padding: 10px 15px;
	font-family:"YouYuan",Georgia,Serif;
	color: #FFFFBB;
	clear: both;
	filter:alpha(opacity:0); 
	opacity:0;
	background: url(../images/2/bk.png) no-repeat;
}
#div3 .title{
	/*padding: 0px;*/
	margin: 5px 0px;
}
#self{ 
    font-size: 20px;
    color: lightblue;
 }
#self p{
 	width: 70%;
 	height: 30px;
 	line-height: 30px;
 	margin-left: 60px;
 	font-weight: 600;
 	filter:alpha(opacity:0); 
	opacity:0;
 }
</style>
<script>

function getStyle(obj, name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj, false)[name];
	}
}

function startMove(obj, json, time, fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		var bStop=true;		//假设：所有值都已经到了
		
		for(var attr in json)
		{
			var cur=0;
			
			if(attr=='opacity')
			{
				cur=Math.round(parseFloat(getStyle(obj, attr))*100);
			}
			else
			{
				cur=parseInt(getStyle(obj, attr));
			}
			
			var speed=(json[attr]-cur)/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			
			if(cur!=json[attr])
				bStop=false;
			
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;
			}
			else
			{
				obj.style[attr]=cur+speed+'px';
			}
		}
		
		if(bStop)
		{
			clearInterval(obj.timer);
						
			if(fnEnd)fnEnd();
		}
	}, time);
}

window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var oDiv2 = document.getElementById("div2");
	var oDiv3 = document.getElementById("div3");
	var self = document.getElementById("self");
	var pArr = self.getElementsByTagName("p");
	console.log(pArr);

    startMove(oDiv, { "margin-top" : 50}, 50);
	oDiv.onmouseover=function (e)
	{	
		startMove(oDiv, {width : 600}, 30, function (){
			startMove(oDiv, {height : 600}, 30, function (){
				startMove(oDiv, {opacity : 100}, 30, function(){
					oDiv2.style.display = "block";
					startMove(oDiv2,{opacity : 100}, 30);
					oDiv3.style.display = "block";
					startMove(oDiv3,{opacity : 100}, 30, function(){
						startMove(pArr[0], {opacity: 100, "margin-left": 180}, 50,function(){
				            startMove(pArr[1], {opacity: 100, "margin-left": 249}, 50, function(){
				               startMove(pArr[2], {opacity: 100, "margin-left": 120}, 50, function(){
				        	       startMove(pArr[3], {opacity: 100, "margin-left": 170}, 50); }); }); });
					});
				});
			});
		});
	};
	
	oDiv.onmouseleave=function (e)
	{
		startMove(oDiv2,{opacity : 0}, 30);
		oDiv2.style.display = "none";
		startMove(oDiv3,{opacity : 0}, 30);
		oDiv3.style.display = "none";
		startMove(oDiv, {opacity : 30}, 30, function (){
			startMove(oDiv, {height : 300}, 30, function (){
				startMove(oDiv, {width : 300}, 30);
			});
		});
	};
};
</script>
</head>

<body>
<div id="div1">
	<img src="../images/2/photo.JPG" >
	<div id="div2">
		<ul>
			<li>姓名：刘静</li>
			<li>邮箱：MirrorNeko@163.com</li>
			<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;♪(´▽｀)</li>
			<li>完成一个页面的时候,有成就感</li>
			<li>擅长html+css</li>
			<li>javascript永远的学徒</li>
		</ul>
	</div>
	<div id="div3">
		<p class = "title">(¬_¬)</p>
		<div id = "self">
			<p>凡心所向</p>
			<p>素履所往</p>
			<p>生如逆旅</p>
			<p>一苇以航</p>
		</div>
	</div>
</div>
</body>
</html>
